<template>
	<view class="container">
		<view class='infobox'>
			<!-- 头像选择 -->
			<button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
				<image class="avatar" :src="avatarUrl"></image>
			</button>

			<!-- 昵称填写 -->
			<input type="text" placeholder-class="input-placeholder" class="nickname-input weui-input"
				v-model="nickname" placeholder="请输入昵称" />

			<!-- 保存按钮 -->
			<button class="save-button" @click="saveUserInfo">保存</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				avatarUrl: '', // 默认头像URL
				nickname: '' // 用户昵称
			};
		},
		onShow() {
			// 页面显示时自动加载最新用户信息
			this.loadUserInfo();
		},
		methods: {
			onChooseAvatar(e) {
				const {
					avatarUrl
				} = e.detail;
				this.avatarUrl = avatarUrl;
			},
			saveUserInfo() {
				uni.setStorage({
					key: 'userInfo',
					data: {
						avatarUrl: this.avatarUrl,
						nickname: this.nickname
					},
					success: () => {
						console.log('用户信息已保存');
						uni.navigateBack({
							delta: 1,
						});
					},
				});
			},
			loadUserInfo() {
				uni.getStorage({
					key: 'userInfo',
					success: (res) => {
						const {
							avatarUrl,
							nickname
						} = res.data;
						this.avatarUrl = avatarUrl || '';
						this.nickname = nickname || '';
					}
				});
			}
		}
	};
</script>

<style>
	.container {
		display: flex;
		flex-direction: column;
		align-items: center;
		background-image: url('http://sr5go4oo1.hn-bkt.clouddn.com/staitc/match.png');
		background-size: 450px;
		background-position: -20px center;
		/* 保证背景图完全覆盖 */
		min-height: 100vh;
		box-sizing: border-box;
		justify-content: center;
		color: white;
	}

	.infobox {
		width: 80vw;
		box-sizing: border-box;
		text-align: center;
		padding: 30px 20px;
		/* 增加内边距让内容看起来不那么紧凑 */
		border-radius: 15px;
		background-color: rgba(30, 30, 54, 0.7);
		/* 提高透明度以增加对比度 */
		backdrop-filter: blur(10px);
		box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
		margin: auto;
	}

	.avatar-wrapper {
		width: 100px;
		height: 100px;
		border-radius: 50%;
		overflow: hidden;
		margin-bottom: 20px;
		/* 添加间距 */
		border: 3px solid #fff;
		/* 白色边框增加视觉效果 */
		box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
		/* 轻微阴影 */
	}

	.avatar {
		width: 100%;
		height: 100%;
		object-fit: cover;
		/* 确保图片不会失真 */
	}

	.nickname-input {
		background-color: rgba(255, 255, 255, 0.1);
		/* 半透明背景 */
		border: none;
		outline: none;
		border-radius: 8px;
		padding: 10px;
		color: #ffffff;
		font-size: 16px;
		width: calc(100% - 40px);
		/* 减去padding值 */
		margin-top: 15px;
		margin-left: 10px;
	}

	.input-placeholder {
		color: rgba(255, 255, 255, 0.7);
		/* 设置placeholder颜色 */
	}

	.save-button {
		background-color: #007AFF;
		/* 蓝色背景 */
		color: white;
		border: none;
		border-radius: 8px;
		margin-top: 20px;
		font-size: 16px;
		outline: none;
		box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
	}

	.save-button:active {
		background-color: #005eb8;
		/* 点击时的颜色变化 */
	}
</style>